<template>
  <Card class="bank">
    <p slot="title" style="font-size:20px;line-height:32px;height:32px">题库管理</p>
    <div slot="extra" style="padding-right:32px;">
      <span>
        <Button type="primary" size="small">查询</Button>
        <upLoadBtn idName="export-btn" type="primary" size="small" class="ml_5" text="导入" />
        <Button size="small" class="ml_5" @click="reset">重置</Button>
      </span>
    </div>
    <Row class="border-bottom">
      <Form ref="form" :model="form" inline label-position="left">
        <i-col>
          <FormItem label="姓名" prop="name" :label-width="45">
            <div class="position-msg">试题名称</div>
            <Input v-model="form.name" style="width:180px;" />
          </FormItem>
        </i-col>
      </Form>
    </Row>
    <i-table :columns="columns" :data="tableData" height="380" />
    <div style="text-align: center;margin-top:20px;">
      <Page :total="total" :page-size="10" show-elevator />
    </div>
    <commonModal :visible.sync="visible" @confirm="confirm" @close="visible = false">
      {{disableMsg}}
    </commonModal>
  </Card>
</template>

<script>
import upLoadBtn from 'components/upLoadBtn'
export default {
  name: 'bank',
  components: {
    upLoadBtn
  },
  computed: {
    title() {
      switch (this.type) {
        case 'base':
          return '题库管理'
          break
        case 'plus':
          return '新建'
          break
        case 'edit':
          return '编辑'
          break
        default:
          break
      }
    }
  },
  data() {
    return {
      form: {
        name: ''
      },
      columns: [
        {
          title: '试题名称',
          key: 'test',
          align: 'center'
        },
        {
          title: '培训名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '考试状态',
          key: 'state',
          align: 'center',
          render: (h, params) => (
            <div>
              {params.row.state === 2
                ? '已结束'
                : params.row.state === 1 ? '停用' : '进行中'}
            </div>
          )
        },
        {
          title: '考试数据',
          key: 'data',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          width: 200,
          render: (h, params) => {
            return (
              <div>
                {params.row.disable !== 2 && (
                  <span
                    class="span-btn dis"
                    onClick={() => this.tableClick('disable', params)}
                  >
                    {params.row.disable === 1 ? '开始' : '结束'}
                  </span>
                )}
                {params.row.disable !== 2 && '|'}
                <span
                  class="span-btn"
                  onClick={() => this.tableClick('export', params)}
                >
                  导出
                </span>
              </div>
            )
          }
        }
      ],
      tableData: [
        {
          test: '我是试题名称',
          name: '我是培训名称',
          state: 2,
          data: '500/20',
          disable: 2
        },
        {
          test: '我是试题名称',
          name: '我是培训名称',
          state: 1,
          data: '500/20',
          disable: 1
        },
        {
          test: '我是试题名称',
          name: '我是培训名称',
          state: 0,
          data: '500/20',
          disable: 0
        }
      ],
      total: 60,
      manageForm: {
        name: '',
        desc: '',
        video: ''
      },
      manageRules: {
        name: [
          {
            required: true,
            message: '请输入名称'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入名称'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入名称'
          }
        ]
      },
      visible: false,
      disableMsg: '',
      rowParams: {}
    }
  },
  methods: {
    reset() {
      this.$refs.form.resetFields()
    },
    tableClick(type, params) {
      this.rowParams = params
      switch (type) {
        case 'disable':
          this.disableMsg =
            params.row.disable === 1
              ? '确定开始此项目？'
              : '确定停用此培训项目？'
          this.visible = true
          break
        case 'export':
          break
        default:
          break
      }
    },
    confirm() {
      this.$set(
        this.tableData[this.rowParams.index],
        'disable',
        this.rowParams.row.disable === 1 ? 0 : 1
      )
      this.visible = false
    }
  }
}
</script>

<style lang="stylus">
.bank {
  height: 600px;
}
</style>
